<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta charset="utf-8">
    <title>牛皮</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <style>
        .layui-upload-div {
            display: inline-block;
            margin: 0 10px 10px 0;
            cursor:pointer;
        }
        .layui-upload-img {
            height: 92px;
        }
        .layui-upload-delete {
            text-align: center;
            border: 1px solid black;
        }
        .layui-upload-list a {
          color: #1E9FFF;
        }
    </style>

    <!-- 引入框架的js、css等 -->
    <jsp:include page="${request.contextPath}/static/include.jsp" flush="true" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/modal.css?ver=<%=System.currentTimeMillis()%>" /> <%-- 模态框的css --%>
    <%-- 引入框架的文件上传 --%>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/framework_upload.js?ver=<%=System.currentTimeMillis()%>"></script>

    <script type="text/javascript">
        //关闭窗口监听器
        var closeLayer = function () {
            //清除未上传的文件
            let fileLidArr = [];
            $(".layui-upload-delete").each(function () {
                fileLidArr.push($(this).attr("lid"));
            })
            let fileLids = fileLidArr.join(",");
            if(!fileLids){
                return true;
            }else{
                return _deleteFiles(fileLids);
            }
        };

        //一般直接写在一个js文件中
        layui.use(['form', 'layer', 'upload'], function() {
            var form = layui.form
                ,$ = layui.jquery
                ,upload = layui.upload;

            verifyExt(form);
            form.on('submit(*)', function(data){ //form校验成功才会执行下面的代码
                //怎么刷新树状table
                ajax("/framework/SysWorker.do?method=add", serializeObject($("#bofrom")));
                return false; //禁用form表单自带的提交
            });

            //多图片上传
            var uploadListIns = upload.render({
                elem: '#idcard'
                ,url: '/Upload.do?method=upload&uuid=${uuid}&&sysFileModuleLid=${sysFileModule_idcard}'
                ,accept: 'images'
                ,multiple: true
                ,auto: true
                ,choose: function(obj){
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        let imgDiv = $(`
                            <div class="layui-upload-div" index=\${index}>
                                <img src="\${result}" alt="\${file.name}" class="layui-upload-img">
                                <div class="layui-upload-delete" fileName="\${file.name}">删除</div>
                            <div>
                        `);
                        $("#idcardPreview").append(imgDiv);
                    });
                }
                //单个文件上传完毕
                ,done: function(res, index, upload){
                    if(res.code != RESPONSE_SUCCESS){
                        layer.msg(res.msg,{icon:2});
                        return;
                    }

                    let imgDiv = $(`.layui-upload-div[index=\${index}]`);
                    imgDiv.find('img').attr("src", "/" + res.data.url);
                    imgDiv.find('.layui-upload-delete').attr("lid", `\${res.data.lid}`);

                    //预览
                    imgDiv.find('img').click(function(){
                        _previewImage($(this).attr("src"));
                    });
                    //删除
                    imgDiv.find('.layui-upload-delete').on('click', function(){
                        let lid = $(this).attr("lid")
                            ,fileName = $(this).attr("fileName");
                        layer.open({
                            content: `是否确定删除 \${fileName}？`,
                            btn: ['确定', '取消'],
                            yes: function(layerIndex) {
                                $.post("/Upload.do?method=deleteFiles", {"sysFileLids": lid}, function(response){
                                    if(response.code != RESPONSE_SUCCESS) {
                                        layer.msg(response.msg,{icon:2});
                                        return;
                                    }
                                    imgDiv.remove();
                                    layer.close(layerIndex);
                                }, "json");
                            }
                        });
                    });
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                //所有文件上传完毕
                ,allDone: function(obj){
                    // console.log(obj.total); //得到总文件数
                    // console.log(obj.successful); //请求成功的文件数
                    // console.log(obj.aborted); //请求失败的文件数
                }
            });

            //多文件上传列表
            var demoListView = $('#demoList')
                ,uploadListIns = upload.render({
                elem: '#certificate'
                ,url: '/Upload.do?method=upload&uuid=${uuid}&&sysFileModuleLid=${sysFileModule_certificate}'
                ,accept: 'file'
                ,multiple: true
                ,auto: true
                ,choose: function(obj){
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function(index, file, result){
                        let tr = $(`
                            <tr id="upload-\${index}">
                                <td>\${file.name}</td>
                                <td>\${(file.size/1014).toFixed(1)}kb</td>
                                <td>等待上传</td>
                                <td>
                                    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger layui-upload-delete" fileName="\${file.name}">删除</button>
                                </td>
                            </tr>
                        `);
                        demoListView.append(tr);

                        //删除
                        tr.find('.layui-upload-delete').on('click', function(){
                            let lid = $(this).attr("lid")
                                ,fileName = $(this).attr("fileName");
                            layer.open({
                                content: `是否确定删除 \${fileName}？`,
                                btn: ['确定', '取消'],
                                yes: function(layerIndex) {
                                    $.post("/Upload.do?method=deleteFiles", {"sysFileLids": lid}, function(response){
                                        if(response.code != RESPONSE_SUCCESS) {
                                            layer.msg(response.msg,{icon:2});
                                            return;
                                        }
                                        delete files[index]; //删除对应的文件
                                        tr.remove();
                                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                        layer.close(layerIndex);
                                    }, "json");
                                }
                            });
                        });
                        //结束
                    });
                }
                ,done: function(res, index, upload){
                    if(res.code != RESPONSE_SUCCESS){ //上传成功
                        return this.error(index, upload);
                    }
                    let tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(0).html(`<a href="/\${res.data.url}" target="_blank">\${res.data.name}</a>`);
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tr.find('.layui-upload-delete').attr("lid", `\${res.data.lid}`);
                    //tds.eq(3).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                ,error: function(index, upload){

                }
            });

        });

    </script>
</head>

<body class="childBody">
    <form id="bofrom" class="layui-form">
        <input type="hidden" name="uuid" value="${uuid}">

        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color:red">*</span>职工名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input" lay-verify="required">
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>多图片上传 + 缩略图即时预览 + 点击预览</legend>
        </fieldset>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="idcard">身份证附件</button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <div class="layui-upload-list" id="idcardPreview"></div>
            </blockquote>
        </div>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>多文件上传 + 点击预览</legend>
        </fieldset>
        <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-normal" id="certificate">职称证书</button>
            <div class="layui-upload-list">
                <table class="layui-table">
                    <thead>
                    <tr><th>文件名</th>
                        <th>大小</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr></thead>
                    <tbody id="demoList"></tbody>
                </table>
            </div>
        </div>

        <!--隐藏的提交按钮，提供父页面调用  -->
        <div class="layui-form-item" style="display: none;">
            <div class="layui-input-inline">
                <button class="layui-btn form-submit-btn" lay-submit="" lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</body>
</html>
